<template>
  <div class="main main_bg">
    <gltitle
      :titleSize="titleSize"
      :is_mt="is_mt"
      v-if="!$store.state.isApp"
    ></gltitle>
    <div
      :style="$store.state.isApp ? 'paddingTop:0' : 'paddingTop:.9rem'"
    ></div>
    <div class="container">
      <div class="top rel">
        <div class="gg">
          <van-notice-bar
            style="padding: 0"
            scrollable
            color="#000"
            background="rgba(0,0,0,0)"
          >
            <div class="scroll-text" v-for="item in rewardlist" :key="item.id">
              <p v-html="item.noticeText"></p>
            </div>
          </van-notice-bar>
        </div>
        <div class="box">
          <div class="price" v-if="bargainInfo.hasSelf">
            <div class="record" @click="handlerRecord">
              <span>{{ $t("bargain.detailed1") }}</span>
            </div>
            <h2>{{ bargainInfo.quotaAmount }}</h2>
            <p class="p1">{{ $t("bargain.totals") }}（USDT）</p>
            <div class="but inlineb" @click="handlerInvite(0)">

              <span>{{ $t("bargain.invitepay") }}</span
              >
            </div>
            <div
              class="link"
              @click="handlerInvite(1)"
              v-if="parseFloat(bargainInfo.quotaAmount) != 0"
            >

              <span>{{ $t("bargain.invitepeople") }}</span><van-icon name="arrow" />
            </div>
          </div>

          <div class="price" v-else>
            <div class="photo">
              <img :src="bargainInfo.avatar" alt="" v-if="bargainInfo.avatar != ''">
            </div>
            <div class="p">
              {{$t('kj.doc1',{n1:bargainInfo.userName})}}</div>
            <div class="but inlineb" @click="go_kj()">
              <span style="font-size: .32rem;">{{$t('kj.doc2')}}</span
              >
            </div>
          </div>
        </div>
      </div>

      <div class="item1">
        <div class="t2">
          <span>{{ $t("bargain.process") }}</span>
        </div>
        <ul class="wrap bet">
          <li>
            <img src="../../assets/images/ico1.png" alt="" />
            <span
              >{{ $t("bargain.userpay") }}<br />{{
                $t("bargain.sharepeople")
              }}</span
            >
          </li>
          <li class="js"><img src="../../assets/images/j2.png" alt="" /></li>
          <li>
            <img src="../../assets/images/ico2.png" alt="" />
            <span
              >{{ $t("bargain.sendshare") }}<br />{{
                $t("bargain.loadapp")
              }}</span
            >
          </li>
          <li class="js"><img src="../../assets/images/j2.png" alt="" /></li>
          <li>
            <img src="../../assets/images/ico3.png" alt="" />
            <span
              >{{ $t("bargain.peoplereg") }}<br />{{
                $t("bargain.scanorder")
              }}</span
            >
          </li>
          <li class="js"><img src="../../assets/images/j2.png" alt="" /></li>
          <li>
            <img src="../../assets/images/ico4.png" alt="" />
            <span
              >{{ $t("bargain.success") }}<br />{{
                $t("bargain.getreward")
              }}</span
            >
          </li>
        </ul>
      </div>

      <div class="item2 rel">
        <div class="t2">
          <span>{{ $t("bargain.interests") }}</span>
        </div>
        <div class="abs" @click="handlerRules">
          <span>{{ $t("bargain.rules") }}</span>
        </div>
        <div class="box">
          <div class="it">
            <div class="t">
              <span
                ><img src="../../assets/images/photo1.png" alt="" />{{
                  $t("bargain.inviteme")
                }}</span
              >
            </div>
            <div class="p">
              <p>{{ $tc("bargain.doc", 1) }}</p>
              {{ $tc("bargain.doc", 2) }}
            </div>
          </div>
          <div class="it">
            <div class="t">
              <span
                ><img src="../../assets/images/photo2.png" alt="" />{{
                  $t("bargain.helpers")
                }}</span
              >
            </div>
            <div class="p">
              {{ $t("bargain.doc2") }}
            </div>
          </div>
          <div class="it">
            <div class="t">
              <span
                >{{
                  $t("bargain.scenecase")
                }}</span
              >
            </div>
            <div class="p">
              <p>
                {{ $tc("bargain.doc3", 1) }}
              </p>
              {{ $tc("bargain.doc3", 2) }}
            </div>
          </div>
        </div>
        <div class="x"></div>
      </div>
      <div class="item3 rel">
        <div class="t3 rel">
          {{ $t("bargain.record")
          }}<span class="abs" @click="handlerMore">{{
            $t("bargain.more")
          }}</span>
        </div>
        <div class="y1 abs"></div>
        <div class="y2 abs"></div>
        <ul v-if="recordList != ''">
          <li class="db" v-for="item in recordList" :key="item.id">
            <div class="cid" v-if="item.ranking == 1">
              <img src="../../assets/images/dj1.png" alt="" />
            </div>
            <div class="cid" v-else-if="item.ranking == 2">
              <img src="../../assets/images/dj2.png" alt="" />
            </div>
            <div class="cid" v-else-if="item.ranking == 3">
              <img src="../../assets/images/dj3.png" alt="" />
            </div>
            <div class="cid" v-else>{{ item.ranking }}</div>
            <div class="photo"><img :src="item.avatar" alt="" /></div>
            <div class="flex">{{ item.userName }}</div>
            <div
              class="str tar"
              v-html="$t('bargain.infomessage', { n1: item.amount })"
            ></div>
          </li>
        </ul>
        <ul v-else>
          <li class="nullrecord">{{ $t("bargain.goshare") }}</li>
        </ul>
      </div>
    </div>

    <van-popup v-model="mod1">
      <div class="popbox">
        <div class="pho"><img :src="bargainInfo.avatar" alt="" v-if="bargainInfo.avatar != ''"></div>
        <div class="p">
          {{$t('kj.doc1',{n1:bargainInfo.userName})}}
        </div>
        <div class="btns" @click="go_kj()">{{$t("kj.doc2")}}</div>
      </div>
    </van-popup>


    <van-popup v-model="mod2">
      <div class="popbox">
        <div class="pho"><img :src="minerData.bargainUserAvatar" alt="" v-if="minerData.bargainUserAvatar != ''"></div>
        <div class="p" style="font-size: .32rem;width: 4.5rem;margin: 0 auto;">
          {{$tc('kj.doc4',minerData.bargainUserName)}}
        </div>
        <div class="btns" @click="handlerMore">{{$t("kj.doc5")}}</div>
      </div>
    </van-popup>


  </div>
</template>
<script>
export default {
  data() {
    return {
      it: 0,
      if_check: false,
      titleSize: this.$t("title.kj"),
      is_mt: true,
      datainfo: "",
      bargainInfo: {},
      recordList: [],
      bargainCode: "",
      rewardlist: [],
      ispay: 0,
      mod1:false,
      mod2:false,
      minerData:[]
    };
  },

  created() {
    if (this.$route.query.bargainCode != undefined) {
      this.bargainCode = this.$route.query.bargainCode;

    }
    this.getdata();
    this.$post(this.URL.bargain.miner, {
    }).then((res) => {
      if (res.code == 0) {
        this.minerData = res.data
        if(res.data.bargainUserId !== 0){
          this.mod2 = true
        }
      } else {
        this.$toast(res.message);
      }
    });
  },
  mounted() {
    window["setshare"] = () => {
      this.setshare();
    };
  },
  methods: {
    getdata() {
      this.$post(this.URL.bargain.userinfo, {
        bargainCode: this.bargainCode,
      }).then((res) => {
        if (res.code == 0) {
          this.bargainInfo = res.data;
          if(this.bargainInfo.hasSelf){
            this.mod1 = false
          }else{
            this.mod1 = true
          }
          if (parseFloat(this.bargainInfo.quotaAmount) > 0) {
            this.ispay = 1;
            this.titleSize = this.$t("title.kj1");
          }
        } else {
          this.$toast(res.message);
        }
      });
      this.$post(this.URL.bargain.rewardlist, {}).then((res) => {
        if (res.code == 0) {
          res.data.forEach((e) => {
            e.noticeText =
              this.$t("bargain.scrolltips", {
                n1: e.account,
                n2: e.amount,
                n3: e.coinName,
              }) + "\xa0\xa0\xa0\xa0";
          });
          this.rewardlist = res.data;
        } else {
          this.$toast(res.message);
        }
      });
      //记录
      this.$post(this.URL.bargain.toprecord, {
        pageSize: 6,
        index: 1,
        bargainCode: this.bargainCode,
      }).then((res) => {
        if (res.code == 0) {
          this.recordList = res.data.list;
        } else {
          this.$toast(res.message);
        }
      });
    },
    setshare() {
      this.ispay = 1;
      this.getdata();
    },
    handlerInvite(k) {
      let uid = this.$route.query.uid;
      let aid = this.$store.state.userData.userId
      let token = this.$route.query.token
      console.log(uid , aid,'ssssssssssss')



      let code = this.CMD.app.INVITE_BARGAIN,
        bargainCode = this.bargainInfo.bargainCode;
      if (this.bargainCode != "") {
        bargainCode = this.bargainCode;
      }







      if (k == 1) {
        code = this.CMD.app.QRCODE;
      }

      if(k == 0){
        if(uid == aid || uid == undefined){
          bargainCode = ''
        }
      }

      console.log(bargainCode)


      if (this.$store.state.isApp) {
        let appResult = {
          code: code,
          data: {
            bargainCode: bargainCode,
          },
        };
        this.common.callBackApp(appResult);
        return;
      } else {
        this.$router.push({
          path: "/user/reg",
          query: { uid: this.bargainInfo.inviteCode, type: 1 },
        });
      }
    },
    handlerMore() {
      this.$router.push("/bargainrecord?code=" + this.bargainCode);
    },
    handlerRecord() {
      this.$router.push("/inviterecord?code=" + this.bargainCode);
    },
    handlerRules() {
      this.$router.push("/bargainrules");
    },
    go_kj(){
      this.mod1 = false
      if (this.$store.state.isApp) {
        let appResult = {
          code: this.CMD.app.GOKANJIA,
          data: {
            bargainCode: this.bargainCode,
          },
        };
        this.common.callBackApp(appResult);
        return;
      } else {
        this.$router.push({
          path: "/user/reg",
          query: { uid: this.bargainInfo.inviteCode, type: 1 },
        });
      }
    }
  },
};
</script>

<style lang="less" scoped>
#app {
  .container {
    background: #c4221d url(../../assets/images/img1.jpg) no-repeat top center;
    background-size: 100% auto;
    .top {
      .gg {
        width: 100%;
        padding-top: 0.2rem;
        .scroll-text {
          display: inline-block;
          height: 0.54rem;
          padding: 0 0.2rem;
          margin-right: 0.2rem;
          background: rgba(0, 0, 0, 0.3);
          color: #fff;
          font-size: 0.22rem;
          border-radius: 0.27rem;
        }
      }
      .box {
        padding-top: 1.2rem;
        text-align: center;
        .price {
          position: relative;
          .photo {
            text-align: center;
            padding-top: .1rem;
            height: 1.1rem;
            background: url(../../assets/images/ico_photo.png) no-repeat center bottom;
            background-size: 1.1rem 100%;
            img {
              width: 1.1rem;
              height: 1.1rem;border-radius: 50%;

            }
          }
          .p {
            font-size: .24rem;
            font-weight: 400;
            text-align: center;
            color: #511104;
            padding: .15rem 0 .32rem 0;
            width: 5rem;
            margin: 0 auto;
          }
          .record {
            position: absolute;
            top: -0.1rem;
            right: 0.34rem;
            min-width: 1.3rem;
            height: 0.48rem;
            padding: 0 0.22rem;
            background: linear-gradient(-90deg, #fbc491 0%, #fcdeb6 100%);
            border-top-left-radius: 0.3rem;
            border-bottom-left-radius: 0.3rem;
            font-size: 0.22rem;
            color: #ce7d30;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            z-index: 5;
          }
        }
        h2 {
          padding-top: 0.3rem;
          font-size: 1rem;
          font-weight: bold;
          color: #ff4a00;
          line-height: 1.2rem;
        }
        .p1 {
          font-size: 0.24rem;
          font-weight: 400;
          color: #ff522c;
          line-height: 0.36rem;
          padding: 0.1rem 0;
        }
        .but {
          font-size: 0.26rem;
          font-weight: 700;
          color: #ffffff;
          border: 0;
          background: url(../../assets/images/btns1.png) no-repeat;
          width: 4.24rem;
          height: 1.02rem;
          background-size: 100% 100%;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: column;
          span {
            margin-top: -0.2rem;
            padding: 0 .3rem;
          }
        }
        .link {
          padding: 0 1.5rem;
          font-size: 0.22rem;
          font-weight: 400;
          color: #701f0c;
          line-height: 0.26rem;
          i {
            font-size: 0.22rem;
            margin-left: 0.1rem;
            vertical-align: middle;
          }
        }
      }
    }
    .t2 {
      position: relative;
      top: -0.08rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      text-align: center;
      width: 4.03rem;
        height: 0.71rem;
        background: url(../../assets/images/t1.png) no-repeat;
        background-size: auto 100%;
        margin: 0 auto;
         font-size: 0.26rem;
        font-weight: 700;
        color: #d62019;
      line-height: .28rem;
      span {
        padding: 0 .5rem;
       margin-top: -.1rem;
      }
    }
    .item1 {
      margin-top: 1.4rem;
      margin-left: -0.1rem;
      margin-right: -0.1rem;
      background: url(../../assets/images/j1.png) no-repeat top center;
      background-size: 100% 100%;
      ul {
        padding: 0.2rem 0.5rem 0.8rem 0.5rem;
        li {
          flex: 1;
          text-align: center;
          img {
            height: .88rem;
          }
          span {
            display: block;
            font-size: 0.22rem;
            font-weight: 400;
            color: #333333;
            line-height: 0.28rem;
            margin-top: 0.2rem;
          }
        }

        .js {
          flex: 0 0 0.24rem;
          padding-top: 0.34rem;
          img {
            height: .21rem;opacity: 0.2;
          }
        }
      }
    }

    .item2 {
      margin-top: 0.3rem;
      background: #fff8f2;
      border-radius: 0.16rem;
      box-shadow: 0px 0.06rem 0.1rem 0px rgba(193, 17, 13, 0.2);
      margin-bottom: .74rem;
      .t2 {
        top:-.1rem
      }
      .x {
        background: url(../../assets/images/x101.png) no-repeat;
        height: .74rem;
        width: 100%;
        position: absolute;bottom:-.54rem;left:0;background-size: 100% 100%;
      }
      .abs {
        right: 0;
        top: 0.23rem;
        span {
          display: block;
          text-align: center;
          height: 0.46rem;
          background: linear-gradient(-90deg, #ff5e18 0%, #fc8d00 100%);
          border-radius: 0.23rem 0 0 0.23rem;
          font-size: 0.2rem;
          padding: 0 0.25rem;
          color: #fff;
          line-height: 0.46rem;
        }
      }
      .box {
        padding: 0.2rem 0 0.2rem 0;
      }
      .it {
        margin: 0 0.45rem;
        margin-bottom: 0.2rem;
        .t {
          text-align: center;
          span {
            display: inline-block;
            vertical-align: top;
            height: 0.58rem;
            line-height: .52rem;

            background: linear-gradient(0deg,#ffd57d 0%, #ffe59a 100%);
            border: .03rem solid #ffbb27;


            padding: 0 0.4rem;
            border-radius: 0.29rem;
            font-size: 0.24rem;
            color: rgba(214, 32, 25, 1);
            img {
              vertical-align: -.08rem;
              margin-right: 0.1rem;
              height: .34rem;
            }
          }
        }
        .p {
          margin-top: -0.3rem;
          background: #fff2e7;
          border: 0.02rem solid #ff8c88;
          border-radius: 0.14rem;
          box-shadow: 0px 0.05rem 0.05rem 0px rgba(195, 33, 29, 0.1);
          padding: 0.3rem;
          padding-top: 0.4rem;
          font-size: 0.24rem;
          line-height: 0.34rem;
          p {
            margin-bottom: 0.14rem;
          }
        }
      }
    }

    .item3 {
      margin-top: 0.3rem;
      padding-bottom: 0.4rem;
      .y1,
      .y2 {
        background: #c4221d;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 0.15rem;
      }
      .y1 {
        top: 0.8rem;
        left: -0.15rem;
      }
      .y2 {
        right: -0.15rem;
        top: 0.8rem;
      }
      .t3 {
        font-size: 0.3rem;
        font-weight: 700;
        text-align: center;
        color: #d62019;
        line-height: 0.98rem;
        background: url(../../assets/images/tit1.png) no-repeat;
        height: 0.98rem;
        background-size: 100% 100%;
        span {
          right: 0.2rem;
          top: 0.04rem;
          font-size: 0.24rem;
          font-weight: 400;
          color: #d62019;
        }
      }
      ul {
        background: rgba(255, 242, 231, 1);
        border-radius: 0.16rem;
        box-shadow: 0px -0.04rem 0.1rem 0px rgba(251, 203, 139, 0.4);
        padding: 0 0.5rem;
        li {
          padding: 0.3rem 0;
          border-bottom: 0.01rem solid #ffd5b1;
          font-size: 0.24rem;
          img {
            vertical-align: middle;
          }
          .cid {
            width: 0.3rem;
            text-align: center;
            img {
              height: .4rem;
            }
          }
          .photo {
            padding: 0 0.2rem;
            img {
              width: 0.48rem;
              height: 0.48rem;
              border-radius: 0.48rem;
              object-fit: cover;
            }
          }
          span {
            color: rgba(242, 45, 30, 1);
            font-size: 0.36rem;
            margin: 0 0.06rem;
          }
        }
        .nullrecord {
          padding: 0.5rem 0;
          text-align: center;
        }
      }
    }
  }


  .popbox {
    padding: .36rem .45rem;
    width: 6rem;
    text-align: center;
    background: #ffffff;
    border-radius: .12rem;
    .pho {
      background: url(../../assets/images/ico_photo.png) no-repeat center center;
      background-size: 1.1rem 1.1rem;
      height: 1.1rem;
      img {
        width: 1.1rem;
        height: 1.1rem;border-radius: 50%;
      }
    }
    .p {
      font-size: .32rem;
      font-weight: 400;
      color: #333333;
      line-height: .46rem;
      padding: .2rem 0 .5rem 0;
    }
    .btns {
      height: .76rem;
      background: linear-gradient(-90deg,#ff4936 0%, #fea007 100%);
      border-radius: .12rem;
      color: #ffffff;
      line-height: .76rem;
      font-size: .28rem;
    }
  }
}

/deep/ .van-popup {
  background: none;
}
</style>
